import AppProvider from "../../sources/AppProvider.ts";
import {useEffect, useMemo, useState} from "react";
import DGFadeView from "../../components/DGFadeView.tsx";
import {Box, Tab, Tabs, tabsClasses, useTheme} from "@mui/material";
import {LauncherRouteSoftware, LauncherRouteSoftwareType} from "../../LauncherRouteSoftware.tsx";
import {Outlet, useLocation, useNavigate} from "react-router-dom";
import DGCardView from "../../components/DGCardView.tsx";


const HomeApp = () => {

    // 全局上下文
    const App = AppProvider.useAppContext();
    // 主题查询
    const mode = useTheme().palette.mode === "light";
    // 路由跳转
    const router = useNavigate();
    // 获取路由
    const location = useLocation().pathname;

    // 菜单栏布局高度
    const height = "50px";
    // Menu 面板控制
    const [view, setView] = useState("index");

    // 点击切换 tab 导航菜单栏
    const handleSwitchView = (view: string) => {
        if (view === "search") router("/index/search", {replace: true});
        if (view === "index") router("/index", {replace: true});
        if (view !== "search" && view !== "index") router("/index/" + view, {replace: true});
        setView(view);
    }

    useEffect(() => {
        if (App) App.setTitle("逐梦园");
    }, [App]);

    // 获取访问路径并更选中组件
    useEffect(() => {
        // 刷新判定路径
        if (location.split("/")[2] === "search") setView("search");
        if (location.split("/")[2] === "index") setView("index");
        // 刷新重置 tab 选中视图
        LauncherRouteSoftwareType.map((v) => {
            if (location.split("/")[2] === "item-" + v['id']) setView("item-" + v['id']);
        })
    }, [location]);

    return (<DGFadeView time={1000} load>
        <Box style={{margin: "15px", display: "flex", flexDirection: "column", gap: "10px"}}>
            {/* 园长寄语 */}
            <DGCardView title="园长寄语" ripple>
                您好！很高兴您能来到这里，希望您在这里度过一段愉快的时光。
                我们深知每一份信任都是一种珍贵的支持。
                我们将继续努力，为您提供更好的服务和体验。
                愿我们提供的有趣内容和实用资源能为您的生活增添一份便利与快乐。
                如果您有任何建议或意见，欢迎随时告诉我们，我们非常重视每一位用户的反馈。
                感谢您选择逐梦园！祝您生活愉快！
            </DGCardView>
            {/* 系统通知 */}
            <DGCardView title="系统通知" ripple>
                系统想说的话就是没有什么想说的，关于有什么想说的等想好了再说，关于什么时候想好等想好了再说。
            </DGCardView>
        </Box>
        {/* 导航菜单栏 */}
        <Tabs
            sx={{[`& .${tabsClasses.scrollButtons}`]: {'&.Mui-disabled': {opacity: 0.3}}}}
            value={view} onChange={(_, index) => handleSwitchView(index)}
            style={{
                height: height, padding: "0 15px", flex: 1, minHeight: "100%", position: "sticky", top: 0,
                zIndex: 1, backgroundColor: mode ? "#EDEDED" : "#474747",
            }} variant="scrollable" scrollButtons allowScrollButtonsMobile>
            <Tab label="搜索" style={{minHeight: height}} value="search"/>
            <Tab label="推荐" style={{minHeight: height}} value="index"/>
            {
                useMemo(() => LauncherRouteSoftwareType.map((v, i) => {
                    if (LauncherRouteSoftware.filter(v2 => v2['type'] === v['id']).length > 0) {
                        return (
                            <Tab label={v['title']} style={{minHeight: height}} value={"item-" + v['id']} key={i}/>)
                    }
                }), [])
            }
        </Tabs>
        {/* 子路由页面展示 */}
        <Outlet/>
    </DGFadeView>);
}

export default HomeApp;